<div
        class="hero min-h-screen"
        th:with="coverConfig=${theme.config.cover}"
        th:style="${not #strings.isEmpty(coverConfig.images)} ? 'background-image: url(' + ${coverConfig.images} + ')' : ''"
        th:srcset="|${thumbnail.gen(coverConfig.images, 's')} 400w,
              ${thumbnail.gen(coverConfig.images, 'm')} 800w,
              ${thumbnail.gen(coverConfig.images, 'l')} 1200w,
              ${thumbnail.gen(coverConfig.images, 'xl')} 1600w|"
        sizes="(max-width: 1600px) 100vw, 1600px">
    <div th:if="${coverConfig.overlay_Show}"
         class="hero-overlay"
         th:classappend="'bg-opacity-' + ${coverConfig.overlay_opacity}
         +' bg-' + ${coverConfig.overlay_color}
         + ' backdrop-' + ${coverConfig.overlay_blur}"></div>
    <div class="hero-content text-neutral-content w-full flex justify-center items-center">
        <div class="flex justify-start items-center w-full">
            <div id="cover_content" class="relative" th:classappend="${coverConfig.text_alignment}" th:style="'left: ' + ${coverConfig.position} + '%;'">
                <h1 class="animate-in slide-in-from-top-28 duration-500 fade-in mb-5 text-5xl font-bold"
                    th:text="${coverConfig.title ?: site.title}"
                    th:classappend="${coverConfig.title_color}"></h1>
                <p class="animate-in slide-in-from-top-28 duration-500 fade-in mb-5 max-w-xl"
                   th:text="${coverConfig.description ?: site.subtitle}"
                   th:classappend="${coverConfig.description_color}"></p>
                <div class="animate-in slide-in-from-bottom-28 duration-500 fade-in">
                    <a th:href="@{${coverConfig.button_url}}">
                        <button class="animate-in repeat-0 btn"
                                th:classappend="${coverConfig.button_style}"
                                th:text="${coverConfig.button_text ?: 'Get Started'}">
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    @media (max-width: 800px) {
        /* 去掉 id 为 cover_content 的 absolute 和 left-0 样式 */
        #cover_content {
            position: relative !important; /* 去掉 absolute */
            text-align: center !important;
            justify-content: center !important;
            left: 0% !important; /* 去掉 left-0 */
            /* 其他可能需要的样式 */
            width: 100%; /* 可选: 使其宽度占满父元素 */
            margin: 0 auto; /* 可选: 居中对齐 */
            grid-template-columns: 1fr !important; /* 强制在手机上设置为单列 */
        }
    }
</style>